<script setup>
import { ref,onMounted } from 'vue'
import { useUserStore } from '@/stores/index'
import { updateInfo } from '@/api/my';
const userStore = useUserStore()

const imgInput = ref(null)
onMounted(() => {
  console.log(userStore?.userInfo)
})
//导航栏及操作
const goBack = () => {
  uni.navigateBack()
}
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
const navBarTop = menuButtonInfo.top
const navBarHeight = menuButtonInfo.height
const formData = ref({
  name:userStore?.userInfo?.name,
  stu_num: userStore?.userInfo?.stu_num,
  sex: userStore?.userInfo?.sex == 0 ? '男' : userStore?.userInfo?.sex == 1 ? '女' : '暂未填写',
  avatar: userStore?.userInfo?.avatar ?? '../../static/noExist.jpg',
  introduction: userStore?.userInfo?.introduction ?? '暂未填写',
  faculty:
    userStore?.userInfo?.faculty == 0
      ? '全体'
      : userStore?.userInfo?.faculty == 1
      ? '计院'
      : userStore?.userInfo?.faculty == 2
      ? '理学院'
      : userStore?.userInfo?.faculty == 3
      ? '管院'
      : userStore?.userInfo?.faculty == 4
      ? '医学院'
      : '暂未填写', //学院
})


//表单中性别与学院选择
const showSex = ref(false)
const showCollege = ref(false)
const sexList = ref([['男', '女']])
const collegeList = ref([
  [
   "全体","计院","理学院","管院","医学院"
  ],
])
const handleSex = (e) => {
  //  console.log(e)
  if(e.value[0] == '男'){
  formData.value.sex = '男'}
  else if(e.value[0] == '女'){
  formData.value.sex = '女'}
  else{
    formData.value.sex = '暂未填写  '
  }
  //  console.log(formData.value.sex)
  showSex.value = false
}
const handleCollege = (e) => {
  formData.value.faculty = e.value[0]
  //  console.log(formData.value.college)
  showCollege.value = false
}

//提供遮罩层查看头像
const showAvatar = ref(false)

//上传头像
const UploadAvatar = async () => {
  uni.chooseImage({
	count: 1,
	sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
	sourceType: ['album'], //从相册选择
	success: function (res) {
		// console.log(JSON.stringify(res.tempFilePaths));
    // formData.value.avatar = res.tempFilePaths[0]
    uni.uploadFile({
      name: 'file',
      filePath: res.tempFilePaths[0],
      url: 'https://information.wusterlllry.top:6262/api/all/uploadPicture',
      success:(res)=>{
        uni.showToast({
          title: '上传成功',
          icon: 'success',
          duration: 1000,
        })
        // console.log(JSON.parse(res.data))
        formData.value.avatar = JSON.parse(res.data).data.picUrl

        
      },
      fail:(err)=>{
        uni.showToast({
          title: '上传失败',
          icon: 'error',
          duration: 1000,
        })
        console.log(err)
      }
    })
    }
});
}
const UpdateInfo=async()=>{
  console.log(formData.value)
  const res=await updateInfo({
    sex: formData.value.sex == '男' ? 0 : formData.value.sex == '女' ? 1 : 2,
    introduction: formData.value.introduction,
    faculty: formData.value.faculty == '全体' ? 0 : formData.value.faculty == '计院' ? 1 : formData.value.faculty == '理学院' ? 2 : formData.value.faculty == '管院' ? 3 : formData.value.faculty == '医学院' ? 4 : 0,
    avatar: formData.value.avatar,
  })
  console.log(res)
  if(res.code==200){
    uni.showToast({
      title: '修改成功',
      icon: 'success',
      duration: 1000,
    })
   userStore.setUserInfo({
    ...formData.value,
    sex: formData.value.sex == '男' ? 0 : formData.value.sex == '女' ? 1 : 2,
    faculty: formData.value.faculty == '全体' ? 0 : formData.value.faculty == '计院' ? 1 : formData.value.faculty == '理学院' ? 2 : formData.value.faculty == '管院' ? 3 : formData.value.faculty == '医学院' ? 4 : 0,
   })
  }
  else{
    uni.showToast({
      title: '修改失败',
      icon: 'error',
      duration: 1000,
    })
  }
}



</script>

<template>
  <view class="page">
    <div class="navigate-bar" :style="{ paddingTop: navBarTop + 'px', lineHeight: navBarHeight + 'px' }">
      <img src="../../static/backArrow.png" alt="" class="backArrow" @click="goBack" />
      <h2>我的信息</h2>
    </div>
    <view class="content" :style="{ paddingTop: navBarTop + navBarHeight + 5 + 'px' }">
      <div class="form-wrapper">
      <up-form>
         <up-form-item
         class="upper-round"
         label="头像"
         prop=""
         >
         <div class="avatar">
          <img v-if="userStore.token" class="avatar" :src="formData.avatar" alt=""  @click="showAvatar = true" >
          <img v-else   class="avatar" src='../../static/noExist.jpg' alt=""   @click="showAvatar = true" >
          <!-- <input  ref="avatarInput" type="file"  style="display:none" @click="UploadAvatar" > -->
          <up-overlay :show="showAvatar" @click="showAvatar = false">
            <div class="wrapperOfAvatar">
              <img v-if="userStore.token" class="Avatarr" :src="formData.avatar" alt="">
              <img v-else class="Avatarr" src='../../static/noExist.jpg' alt="" />
            </div>
          </up-overlay>

          <img ref="imgInput" class="avatar" src="../../static/myArrow.png" alt="" style="margin-left:10px;" @click="UploadAvatar">
         </div>
         </up-form-item>
         <up-form-item
         label="姓名"
         prop="formData.name"
         >
         <div class="slot_content">
          {{formData.name}}
         </div>
         </up-form-item>
         <up-form-item
         label="学号"
         prop="formData.stu_num"
         >
         <div class="slot_content">{{formData.stu_num}}</div>
         </up-form-item>
         <up-form-item
         label="性别"
         prop="formData.sex"
         >
         <div class="slot_content" @click="showSex = true">{{ formData.sex.length == 0 ? '请选择' : formData.sex }}</div>
         <up-picker  :show="showSex" :columns="sexList" @confirm="handleSex" @cancel="showSex = false" />
         </up-form-item>
         <up-form-item
         label="学院"
         prop="formData.faculty"
         >
         <div class="slot_content" @click="showCollege = true">{{ formData.faculty.length == 0 ? '请选择' : formData.faculty }}</div>
          <up-picker
            :show="showCollege"
            :columns="collegeList"
            @confirm="handleCollege"
            @cancel="showCollege = false"
          />
         </up-form-item>
         <up-form-item
         class="the_last"
         label="简介"
         prop="formData.introduction"
         >
         <div class="slot_content-1">
          <textarea v-model="formData.introduction" class="introduction" placeholder="暂未填写" :style="{ overflow: auto }"></textarea>
         </div>
        
         </up-form-item>
      </up-form>
    
      </div>
      <up-button type="primary" size="large" shape="circle" @click="UpdateInfo"> 提交 </up-button>
    </view>
  </view>
</template>

<style scoped lang="scss">
body {
  margin: 0;
}
.wrapperOfAvatar {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  ::v-deep.Avatarr {
    width: 150px;
    height: 150px;
  }
}

.page {
  height: 100vh;
  background-color: Rgb(239, 240, 244);
  font-family: "Gill Sans", sans-serif;
}

.navigate-bar {
  display: flex;
  justify-content: center;
  position: fixed;
  width: 100%;
  background-color: rgb(239, 240, 244);
  .backArrow {
    width: 30px;
    height: 30px;
    position: absolute;
    left: 1%;
  }
  h2 {
    justify-items: end;
  }
}
.content{
  
  :deep(.u-button.data-v-461e713c){
    margin-top:30px;
    width:280px!important;
  }
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .form-wrapper{
  border-radius:5%;
    .upper-round{
      border: 0 1px 0 1px;
      border: radius 15%;;
    }
  margin-top:20px;
  width:86%;
  background-color: white;
  .up-form{
   display:flex;
  }
  :deep(.u-form-item.data-v-b4fd400b){
    margin:0 50px 0 50px;
    height:90px;
    border-bottom: 2px solid rgb(239, 240, 244);
    display: flex;
    justify-content: center;
    
  }
  ::v-deep.the_last{
    border-bottom:1px!important;
  }
  
  :deep(.u-form-item__body__right.data-v-b4fd400b)
  {
    height:40px;
    width: 240px;
    
  }
  :deep(.u-form-item__body__right__content.data-v-b4fd400b)
  {
    display: flex;
    align-items: center;
  }
  :deep(.u-form-item__body__right__content__slot.data-v-b4fd400b)
  {
   font-size: medium!important;

   .avatar{
    display:flex;
    flex-direction: row;
    width:90px;
    height: 40px;
    margin-left:auto;
   } 
   display: flex;
   align-items: center;
   .slot_content{
    height:40px;
    margin-left:auto;
    line-height:40px;
    color:rgb(144,134,144)
   }
   .slot_content-1{
    margin-top:10px;;
 
    width:100%;
     .introduction{
      height:40px;
      margin-left:auto;
      line-height:5px;
      text-align: right;
      width: 90%;

      color:rgb(144,134,144)
     }
   }
   
  }
  :deep(.u-form-item__body__left.data-v-b4fd400b)
  {
    height:40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  }

}
</style>
